<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.9.1/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type:"GET",
                url:"http://localhost:8080/jQueryAjax/ReadyAjaxServlet",
                dataType:"text",
                success:function (data) {
                     var provinces=JSON.parse(data)
                    var html="";
                    console.log(data)
                     for(i=0;i<provinces.length;i++){
                         $("#slt1").append("<option value="+i+">"+provinces[i].name+"</option>");

                     }

                }
            });
        });
        function findAjax() {
           var value= $("#slt1").val();
            $.ajax({
                type: "GET",
                url:"http://localhost:8080/jQueryAjax/ajaxFindServlet",
                data:"value="+value,
                dataType:"text",
                success:function (data) {
                    var state=JSON.parse(data);
                    $("#slt2").html("");
                    $("#slt2").append("<option>请选择</option>>")
                    for(i=0;i<state.length;i++){
                        $("#slt2").append("<option >"+state[i]+"</option>");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <select id="slt1" onchange="findAjax()">
        <option >请选择</option>
    </select>
    <select id="slt2" >
        <option checked >请选择</option>
    </select>
</body>
</html>